import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';
import { tabStyle } from '../tab/tab.css';
import { rollerStyle } from '../roller/roller.css';

export const pickerStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	background: vars.color.baseBackground,
	border: `1px solid ${vars.color.border}`,
});

globalStyle(`${pickerStyle} .${rollerStyle}:focus`, {
	zIndex: 3,
});

globalStyle(`${pickerStyle} div.bar`, {
	display: 'flex',
	alignItems: 'center',
	borderBottom: `1px solid ${vars.color.border}`,
	height: '3.4em',
});

globalStyle(`${pickerStyle} div.bar.hidden`, {
	display: 'none',
});

globalStyle(`${pickerStyle}>div.bar>h4`, {
	flex: 1,
	textAlign: 'center',
	margin: '0',
	whiteSpace: 'nowrap',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
});

globalStyle(`${pickerStyle}>.${tabStyle}>div.body,${pickerStyle}>.${tabStyle}>div.head`, {
	padding: '0',
	background: vars.color.baseBackground,
});

globalStyle(`${pickerStyle}>.${tabStyle}>div.body>div.group`, {
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'stretch',
});

globalStyle(`${pickerStyle} .${rollerStyle}`, {
	flex: 1,
});
